<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器   语法：任意选择器：hover【悬停】每个伪类型选择器，具备特点
			               所有元素具备:hover  【常见伪类选择器】
			 */
			h1:hover{
				color: #aaff00;
				background: #ff557f;
			}
			/*
			 * 伪类选择器：      ：link     链接未点击时状态
			 *                 ：active    链接被点击时状态
			 *                 ：visited   链接点击后状态
			 *                 ：hover     悬停链接时状态
			 * 主要结合在一起，针对a元素
			 */
			a:link{/* 未访问状态  */
				color: #00ff7f;
				/* 去掉超链接下划线 */
				text-decoration: none;
			}
			a:active{/*被点击时状态*/
				color: #aaaaff;
				background: #ffff00;
			}
			a:visited{/*点击后效果*/
				color: #aaaaff;
				background: #ff0000;
			}
			a:hover{
				font-size: 36px;
			}
			/**
			 * 伪类选择器：input：focus 获取焦点 鼠标点击输入框时的效果
			 * 
			 * 针对 输入框 input元素
			 */
			input:focus{
				background: #ffff00;
			}
			   /* 伪类选择器  :first-child 第一个儿子元素
							 :last-child 最后一个儿子元素
							 :nth-child(n) 匹配n个儿子元素
				针对父子级关系			 
				*/
			   li:first-child{
				   color: #cbc9ff;
			   }
			   li:last-child{
				   background: #cbc9ff;
			   }
			   li:nth-child(2){
				   font-size: 36px;
			   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>